<template>
  <div class="con">
    <tree @change-video="changeTree" />
    <div class="videoDome">
      <el-tabs v-model="activeName" type="border-card">
        <el-tab-pane name="img">
          <span slot="label"><i class="el-icon-date"></i> 图片查询</span>
          <div class="comtimes">
            <times @change-time="changeTime" ref="times" />
            <el-button
              type="primary"
              @click="inquery(1)"
              class="el-icon-search"
              size="mini"
            >
              查询
            </el-button>
          </div>
          <div class="img demo-image__error">
            <el-image
              style="width: auto; height: 53vh"
              :src="url"
              fit="contain"
              :preview-src-list="srcList"
              @error="imgExists($event)"
            >
            </el-image>
            <ul>
              <li
                v-for="(item, index) in srcList"
                :key="index"
                @click="changeImg(index)"
                :class="{ actived: index == isactive }"
              >
                <img :src="item" @error="imgExists($event)" />
              </li>
            </ul>
          </div>
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="page"
            :page-size="limit"
            layout="prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-tab-pane>

        <el-tab-pane name="video">
          <span slot="label"><i class="el-icon-date"></i> 视频查询</span>
          <div class="comtimes">
            <times @change-time="changeTime" />
            <el-button
              type="primary"
              @click="inquery(2)"
              class="el-icon-search"
              size="mini"
            >
              查询
            </el-button>
          </div>

          <el-table
            :data="tableData"
            border
            :row-style="{ height: 0 + 'px' }"
            :cell-style="{ padding: 5 + 'px' }"
            style="width: 100%"
            height="66vh"
            :header-cell-style="tableHeaderColor"
            cell-class-name="cell-class-name"
          >
            <el-table-column prop="video_id" label="视频编号" width="80">
            </el-table-column>
            <el-table-column prop="nvr_IMEI" label="设备IMEI">
            </el-table-column>
            <el-table-column
              prop="video_name"
              label="视频名称"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column prop="video_time" label="录制时间">
            </el-table-column>
            <el-table-column
              prop="video_record_time"
              label="录制时长"
              width="80"
            >
            </el-table-column>

            <el-table-column label="操作" width="150">
              <template slot-scope="scope">
                <el-button
                  @click="download(scope.row)"
                  type="primary"
                  size="mini"
                  >下载</el-button
                >
                <el-button
                  @click="playVideo(scope.row)"
                  type="primary"
                  size="mini"
                  >播放</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @current-change="handleCurrentChange2"
            :current-page.sync="page2"
            :page-size="limit2"
            layout="prev, pager, next, jumper"
            :total="total2"
          >
          </el-pagination>
        </el-tab-pane>
      </el-tabs>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="playVideoVisible"
      width="50%"
      class="video"
      v-dialogDrag
    >
      <video v-if="playVideoVisible" width="100%" controls autoplay>
        <source
          :src="`/platform/management/videos/${videoURL}`"
          type="video/mp4"
        />
        您的浏览器不支持 video 标签。
      </video>
    </el-dialog>
  </div>
</template>
<script>
import Tree from "@/components/tree";
import Times from "@/components/Times";
import { QuerImg, QuerVideo } from "@/http";
export default {
  name: "QueryImg",
  components: {
    Tree,
    Times,
  },
  data() {
    return {
      nvr_id: "",
      starTime: "",
      endTime: "",
      page: 1,
      limit: 8,
      total: 0,
      videoURL: "",
      playVideoVisible: false,
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      isactive: 0,
      // 视频
      tableData: [],
      total2: 0,
      limit2: 10,
      page2: 1,
      srcList: [
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
        "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
        "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
        "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
        "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
        "https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
        "https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg",
      ],
      activeName: "img",
    };
  },
  watch: {
    activeName: {
      handler(val) {
        if (this.nvr_id != "") {
          val == "img" ? this.queryIMg() : this.queryVideo();
        }
      },
      immediate: false,
    },
    // playVideoVisible: {
    //   handler(val) {
    //     !val && (this.videoURL = "");
    //   },
    // },
  },

  methods: {
    imgExists(e) {
      //默认图片
      var imgUrl = require("../assets/images/jze.png");
      var img = e.srcElement;
      img.src = imgUrl;
      //判断图片大小是否大于0 或者 图片高度与宽度都大于0
      if (img.filesize > 0 || (img.width > 0 && img.height > 0)) {
        e.src = imgUrl;
      } else {
        //默认图片也不存在的时候
      }
    },

    changeTree(val) {
      this.nvr_id = val.node_id;
      this.page = 1;
      this.$refs.times.starTime = "";
      if (this.activeName == "img") {
        this.queryIMg();
      } else {
        this.queryVideo();
      }
    },
    changeTime(val) {
      this.starTime = val[0];
      this.endTime = val[1] + " 23:59:59";
      if (this.nvr_id != "") {
        this.page = 1;
        if (this.activeName == "img") {
          this.queryIMg();
        } else {
          this.queryVideo();
        }
      } else {
        this.$message.warning("请先选择设备!");
      }
    },
    inquery(indx) {
      this.nvr_id
        ? indx == 1
          ? this.queryIMg()
          : this.queryVideo()
        : this.$message.warning("请先选择设备!");
    },
    handleCurrentChange(pe) {
      this.page = pe;
      this.queryIMg();
    },
    handleCurrentChange2(pe) {
      this.page2 = pe;
      this.queryVideo();
    },
    changeImg(e) {
      this.url = this.srcList[e];
      this.isactive = e;
      // if (e.target.currentSrc) {
      //   this.url = e.target.currentSrc;
      //   e.path[1].style.boederColor = "#88f";
      //   console.log(e.path[1].style);
      // }
    },

    tableHeaderColor({ rowIndex }) {
      if (rowIndex === 0) {
        return "background-color: #009A9A;color: #fff;font-weight: 500;'font-size':'14px';height:20px;padding:6px 0";
      }
    },
    // img 查询函数
    queryIMg(
      nvr_id = this.nvr_id,
      startTime = this.starTime,
      endTime = this.endTime,
      page = this.page,
      limit = this.limit
    ) {
      QuerImg({ nvr_id, startTime, endTime, page, limit }).then((res) => {
        this.total = res.count;
        this.srcList = [];
        res.data.forEach((item) => {
          this.srcList.push("/platform/management/images/" + item.image_name);
        });
        this.isactive = 0;
        this.url = this.srcList[this.isactive];
      });
    },

    // this.$axios
    //     .get(
    //       `/qimg/tool_management/image?nvr_id=${nvr_id}&page=${page}&limit=${limit}&starTime=${starTime}&endTime=${endTime}`
    //     )
    // video 查询
    queryVideo(
      nvr_id = this.nvr_id,
      startTime = this.starTime,
      endTime = this.endTime,
      page = this.page2,
      limit = this.limit2
    ) {
      QuerVideo({ nvr_id, startTime, endTime, page, limit }).then((res) => {
        this.tableData = res.data;
        this.total2 = res.count;
      });
    },
    download(ee) {
      const downloadFileA = document.createElement("a");
      document.body.append(downloadFileA);
      downloadFileA.href = `/platform/management/videos/${ee.video_name}`;
      downloadFileA.download = ee.video_name;
      downloadFileA.rel = "noopener noreferrer";
      downloadFileA.click();
      document.body.removeChild(downloadFileA);
    },
    playVideo(val) {
      this.playVideoVisible = true;
      this.videoURL = val.video_name;
    },
  },
};
</script>
<style lang="less" scoped>
.videoDome {
  width: 80%;
  height: 83.5vh;
}
.treeDom {
  height: 83.5vh;
}

.comtimes {
  border-bottom: 1px solid #009688;
  margin-bottom: 10px;
  button {
    margin-left: 25px;
  }
}
.times {
  display: inline-block;
}
.img {
  text-align: center;
  box-sizing: border-box;
  ul {
    margin-top: 15px;
    display: flex;
    flex-flow: row nowrap;
  }
  li {
    width: calc(100% / 8);
    margin-right: 10px;
    height: 10vh;
    overflow: hidden;
    border: 1px solid #ddd;
    box-sizing: border-box;
    &:last-child {
      margin-right: 0;
    }

    img {
      width: 100%;
    }
  }
  .actived {
    border-width: 2px;
    border-color: #009688;
  }
}

.el-table,
.el-table__expanded-cell {
  background-color: transparent;
}
</style>
